<template>
    <div class="block text-center">
        <el-carousel height="150px">
          <el-carousel-item v-for="v in ads" :key="v.aid">
            <div class="l">
              <img src="../assets/img/ad.webp">
              <h1>{{ v.content }}</h1>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    
</template>

<script setup>
import { getApi} from '@/util/api'
</script>

<script>
    export default {
        data(){
          return{
            ads:[],
            pagination:{
          currentPage:1,//当前页码
          pageSize:7,//一页多少条
          total:0
        }  
          }
        },
        created(){
        this.getAll();
        },
        methods:{
          getAll(){
          getApi("admin/ads/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((rs)=>{
              this.pagination.pageSize = rs.data.data.size;
              this.pagination.currentPage = rs.data.data.current;
              this.pagination.total = rs.data.data.total;
              this.ads=rs.data.data.records;
              }).catch(error=>{
                  alert(error);
              })
        },
        }
    }
</script>

<style lang="scss" scoped>

.l{
  display: flex;
  text-align: center;
  img{
    height: 100px;
    width: 100px;
    margin-top: 30px;
    margin-left: 100px;

  }
  h1 {
    color: #475669;
    opacity: 0.75;
    font-size: 80px;
    margin-top: 30px;
    margin-left: 30px;

  }
}

      
</style>